import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';
import { TextField, Row, Col, Button, Select, ButtonGroup } from '@folio/stripes/components';
import DatePerfectChoice from '../../util/DateCustomize/DatePerfectChoice';
import {  IfPermission } from '@folio/stripes/core';
class SearchForm extends Component {
  constructor(props) {
    super(props);
  }

    static propTypes = {
      handleSubmit: PropTypes.func.isRequired,
      initialValues: PropTypes.object,
      dictionary: PropTypes.object,
      cleanSearch: PropTypes.func,
      intl: PropTypes.func,
      changeUrgentNotify:PropTypes.func,
      labelName:PropTypes.object,
      toModel: PropTypes.func,
    };

    fieldChange = () => {
      const { handleSubmit } = this.props;
      this.setState(() => {
        handleSubmit();
      });
    };

    render() {
      const {
        handleSubmit,

        toModel,
        intl,
      } = this.props;
      return (

        <form data-test-form-page id="form-search" onSubmit={handleSubmit}>
            <Row style={{ width: '100%' }}>
              <Col xs={2}>
                <Field
                  component={Select}
                  name="status"
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                  dataOptions={[
                    {
                      id: '0',
                      value: '',
                      label: intl.formatMessage({id:'ui-party.loans.columns.party.approvalStatus'})
                    },
                    {
                      id: '1',
                      value: '1',
                      label: intl.formatMessage({ id: 'ui-party.loans.columns.party.approved' })
                    },
                    {
                      id: '2',
                      value: '0',
                      label: intl.formatMessage({ id: 'ui-party.loans.columns.party.unapproved' })
                    }
                  ]}
                />
              </Col>
              <Col xs={2}>
                <Field
                  component={TextField}
                  name="partyName"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.partyName' })}
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col>
              <Col xs={2}>
                <Field
                  component={TextField}
                  name="readerName"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.readerName' })}
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col>
              <Col xs={2}>
                <Field
                  component={TextField}
                  name="readerAccount"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.readerAccount' })}
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col>
              <Col xs={2}>
                <Field
                  component={DatePerfectChoice}
                  name="partyStartDate"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.partyStartDate' })}
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col>
              <Col xs={2}>
                <Field
                  component={DatePerfectChoice}
                  name="partyEndDate"
                  placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.party.partyEndDate' })}
                  onBlur={this.fieldChange}
                  onClearField={this.fieldChange}
                />
              </Col>

            </Row>
            <Row>
              <Col xs={12}>
                <ButtonGroup>
                  <Button type="submit">
                    <FormattedMessage id="ui-party.search" />
                  </Button>
                  <IfPermission perm={"ui-party.reserve.manage.view.add"}>
                    <Button onClick={() => {
                      toModel('/party/reserve/add');
                    }}
                    >
                      <FormattedMessage id="ui-party.add" />
                    </Button>
                  </IfPermission>
                  <IfPermission perm={"ui-party.reserve.manage.view.sendMessage"}>
                  <Button onClick={() => { this.props.changeUrgentNotify(); }}>
                    <FormattedMessage id="ui-party.loans.columns.reserve.urgentNotify" />
                  </Button>
                  </IfPermission>
                </ButtonGroup>

              </Col>
            </Row>
          </form>

      );
    }
}

export default injectIntl(
  reduxForm({
    form:   'appointmentSearchFrom',
    navigationCheck: true,
    enableReinitialize: true
  })(SearchForm)
);
